<template>
  <div class="userInfoBasic-warpper" v-loading="userInfoLoading">
    <!--基本信息模块-->
    <div v-if="userInfo">
      <AreaTitleWarp :title="'基础信息'"></AreaTitleWarp>
      <el-row class="basic">
        <el-col :span="24">
          <div class="baseInfo-warpper">
            <div class="baseInfo-main">
              <ul class="baseInfo-flex-ul">
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">姓名：</span>
                  <span class="baseInfo-line-data">{{ userInfo.realname  }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">身份证号：</span>
                  <span class="baseInfo-line-data">{{ userInfo.idcard  }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">手机号：</span>
                  <span class="baseInfo-line-data">{{ userInfo.mobile }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">性别：</span>
                  <span class="baseInfo-line-data">{{ userInfo.sex | filter_sex }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">手机型号：</span>
                  <span class="baseInfo-line-data">{{ userInfo.productModel }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">身份证归属地：</span>
                  <span class="baseInfo-line-data">{{ userInfo.address }}</span>
                </li>
                <li class="baseInfo-flex-li">
                  <span class="baseInfo-line-title">手机号归属地：</span>
                  <span class="baseInfo-line-data">{{ userInfo.mobileLocation }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>    

    <div v-if="userInfo">
      <AreaTitleWarp :title="'照片信息'"></AreaTitleWarp>
      <AreaWarp :padding="true">
        <div class="idcard" >
          <div class="idcard-just">
            <span class="just-title">身份证正面照</span>
            <img @click="imgClick" class="just-img" :src="userInfo.frontImgUrl" alt="无图" />
          </div>
          <div class="idcard-just">
            <span class="just-title">身份证反面照</span>
            <img @click="imgClick" class="just-img" :src="userInfo.backImgUrl" alt="无图" />
          </div>
          <div class="idcard-just">
            <span class="just-title">人脸识别照片</span>
            <img @click="imgClick" class="just-img"  :src="userInfo.avatarUrl1" alt="无图" />
            <img @click="imgClick" class="just-img"  :src="userInfo.avatarUrl2" alt="无图" />
            <img @click="imgClick" class="just-img"  :src="userInfo.avatarUrl3" alt="无图" />
            <img @click="imgClick" class="just-img"  :src="userInfo.avatarUrl4" alt="无图" />
          </div>
        </div>
      </AreaWarp>
    </div>

    <div v-if="userInfo">
      <AreaTitleWarp :title="'详细信息'"></AreaTitleWarp>
      <AreaWarp :padding="false">
        <div class="baseInfo-warpper">
          <div class="baseInfo-main">
            <ul class="baseInfo-flex-ul">
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">芝麻分：</span>
                <span class="baseInfo-line-data">{{ userInfo.zhimaScore }}</span>
              </li>
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">工作性质：</span>
                <span class="baseInfo-line-data">{{ userInfo.jobType  }}</span>
              </li>
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">月均收入：</span>
                <span class="baseInfo-line-data">{{ userInfo.salary }}</span>
              </li>
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">居住地址：</span>
                <span class="baseInfo-line-data">{{ userInfo.livePlace  }}</span>
              </li>
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">单位名称：</span>
                <span class="baseInfo-line-data">{{ userInfo.companyName }}</span>
              </li>
              <li class="baseInfo-flex-li">
                <span class="baseInfo-line-title">单位地址：</span>
                <span class="baseInfo-line-data">{{ userInfo.workPlace  }}</span>
              </li>
            </ul>
          </div>
        </div>
      </AreaWarp>
    </div>

    <!-- 借贷订单列表 -->
    <userDebitList :queryMsg="queryMsg" :message="userInfo"></userDebitList>

    <!--身份证照片弹窗-->
    <el-dialog :visible.sync="centerDialogVisible" center width="900px">
      <div class="bigImg-div"><img id="bigImg" :src="bigImg" alt="无图片"><span></span></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import { filterTime,filterProduct } from '../../assets/js/time.js';
  import userDebitList from './uesrDebitList.vue'

  export default {
    props: ["queryMsg"],
    data() {
      return {
        userInfo: null,
        userInfoLoading: false,
        tableLoading:false,
        centerDialogVisible: false,
        bigImg: '',
        tableInfo:{
          debitList:[],
        }
      }
    },
    components:{
      userDebitList,
    },
    methods: {
      getUserBaseInfo() {
        let that = this;
        that.userInfoLoading = true;
        that.ajaxJson({
          url: '/collection/detail',
          data: {
            userId: that.queryMsg.userId,
            borrowId:that.queryMsg.borrowId
          },
          success: function (data) {
            if (data.code == '0') {
              that.userInfo = data.data
            }
            that.userInfoLoading = false;
          }
        })
      },
      //点击放大照片
      imgClick(row,event){
        let that = this;
        let bigImgSrc = '';
        if(row.toElement){
          bigImgSrc = row.toElement.src;
        }else{
          bigImgSrc = row.target.currentSrc;
        }
        that.bigImg = bigImgSrc;
        that.centerDialogVisible = true;
      },

      filter_time: filterTime,
      filter_product: filterProduct
    },
    filters: {
      filter_sex: function (value) {
        switch (value){
          case '0':
          case 0 :
              return '男';
          case 1:
              return '女';
          case -1:
              return '未知';
          default:
              return '';
        }
      }
    },
    created() {
      let that = this;
      that.getUserBaseInfo()
    }
  }
</script>

<style lang="less">
  .userInfoBasic-warpper {
    .basic{
      margin-bottom:30px;
    }
    .baseInfo-warpper {
      background: #fff;
      border-radius: 4px;
      .baseInfo-main {
        .baseInfo-name {
          font-size: 20px;
          color: #333333;
          text-align: center;
        }
        .baseInfo-flex-ul {
          padding:20px;
          overflow: hidden;
          .baseInfo-flex-li{
            width:50%;
            float:left;
            display:flex;
            line-height: 30px;
            .baseInfo-line-data {
              font-size: 16px;
              
              color: #333333;
              margin-bottom: 6px;
            }
            .baseInfo-line-title{
              font-size: 14px;
              color: #999999;
            }
          }
        }
      }
    }
    .idcard{
      padding:30px 0;
      overflow: hidden;
      .idcard-just{
        display: flex;
        float:left;
        height:50px;
        margin-left: 30px;
        .just-title{
          width:100px;
          color:#999;
          font-size:14px;
        }
        .just-img{
          display: block;
          width:50px;
          height:50px;
          margin-right: 10px;
        }
      }
    }
    .bigImg-div {
      text-align: center;
      #bigImg {
        display: inline-block;
        max-width: 850px;
        vertical-align: middle;
      }
      span {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
</style>

